<template>
	<view class="nl-shadow-box nl-box-padding">
		<!-- <u-search @input="onInput" :show-action="true" action-text="搜索" :animation="true"></u-search> -->
		<!-- 搜索 -->
		<view class="nl-search-box">
			<view class="search">
				<u-icon class="icon" name="search" color="#D1D1D1" size="40"></u-icon>
				<u-input v-model="inputdata" class="input" type="text" placeholder="输入单元号" />
				<view class="button" @click="searchUnit()">搜索</view>
			</view>
		</view>
		<!-- 内容 -->
		<view v-if="hasNet">
			<view class="list-box" v-if="hasInfo">
				<view class="nl-flex-list active" v-for="(item,index) in data" :key="index"
					@click="unitback(item.unitNum,item.unitId)">
					<view class="icon"></view>
					<view>{{item.unitNum}}单元</view>
				</view>
			</view>
			<view v-else>
				<noData noDataText="暂无数据"></noData>
			</view>
		</view>
		<view v-else>
			<netError @refresh="refresh()"></netError>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getQueryUnits
	} from "@/api/common"
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

				data: [],
				// data:[1,2,3,4,5,6,7],
				//输入到搜索框的数据
				inputdata: "",
				hasNet: true, //是否有网络
				hasInfo: true, //判断是否有数据
				floorid: '', //得到楼段id
				//请求参数
				param: {
					communityId: '', //小区编号
					floorId: '',
					name: '',
					page: '',
					row: ''
				}
			}
		},
		onLoad(option) {
			this.floorid = option.floorid || "";
			uni.showLoading({
				title: '加载中'
			})
			this.getQueryUnits({
				communityId: this.userCommunity.communityId, //小区编号 
				floorId: this.floorid,
				name: '',
				page: 1,
				row: 10
			})
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		//下拉刷新
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			})
			this.getQueryUnits({
				communityId: this.userCommunity.communityId, //小区编号 
				floorId: this.floorid,
				name: '',
				page: 1,
				row: 10
			})
			this.inputdata = ''
		},
		methods: {
			getQueryUnits(dat) {

				getQueryUnits(dat).then((res) => {

					this.data = res
					this.hasNet = true
					if (this.data.length === 0) {
						this.hasInfo = false
					} else {
						this.hasInfo = true
					}
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}).catch((err) => {
					this.hasNet = false
					uni.hideLoading();
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 
			 */
			unitback(unitNum, unitId) {
				// return
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prePage = pages[pages.length - 2]
				prePage.$vm.data.unit = unitNum
				prePage.$vm.data.unitid = unitId
				prePage.$vm.data.house=''
				prePage.$vm.data.roomid=''
				uni.navigateBack({
					delta: 1
				})
			},
			//点击按钮搜索
			searchUnit() {
				uni.showLoading({
					title: '加载中'
				})
				getQueryUnits({
					communityId: this.userCommunity.communityId, //小区编号 
					floorId: this.floorid,
					name: this.inputdata,
					page: 1,
					row: 10
				})
			},
			//无网络点击刷新
			refresh() {
				uni.showLoading({
					title: '加载中'
				})
				this.getQueryUnits({
					communityId: this.userCommunity.communityId, //小区编号 
					floorId: this.floorid,
					name: '',
					page: 1,
					row: 10
				})
			}
		}
	}
</script>

<style lang="scss">
	.nl-shadow-box {
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
	}

	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}

	.nl-search-box {
		padding: 20rpx 0;
		border-bottom: 2rpx solid $uni-bg-color-grey;

		.search {
			height: 72rpx;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #F3F3F3;
		}

		.icon {
			margin: 0 16rpx 0 24rpx;
		}

		.input {
			flex: 1;
			font-size: $uni-font-size-base;
			margin-right: 15rpx;
		}

		.button {
			width: 140rpx;
			line-height: 72rpx;
			margin-left: auto;
			text-align: center;
			color: #FFFFFF;
			user-select: none;
			font-size: $uni-font-size-base;
			background-color: $nl-color-main;
		}

		.button:active {
			background-color: #0f70d6;
		}
	}

	.list-box {
		width: 100%;

		// padding-bottom: 20rpx;
		.nl-flex-list {
			.icon {
				width: 28rpx;
				height: 28rpx;
				background-image: url(../../../static/roomquery/dy.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 16rpx;
			}
		}

		.name {
			flex: 1;
			margin-right: 16rpx;
		}
	}
</style>
